<template>
	<view class="leo-tree">
       
		<treeNode 
            v-for="item in data" 
            :item="item" 
            :key="item[defaultProps.id]" 
            :defaultProps="defaultProps" 
            :divider="divider" 
            :edit="edit"
            :show="show"
            @add-item="addItem" 
            @delete-item="deleteItem"
            @finger-action="fingerAction"
            @onlongPress="onlongPress"></treeNode>
        <neil-modal
            :show="inputshow"
            @close="close"
            :title="inputtitle"
            @cancel="cancel"
            @confirm="inputconfirm">
            <input v-model="inputcontent" style="margin:20upx" placeholder="请输入..." />
        </neil-modal>
	</view>
</template>
<script>
    import neilModal from './tree-node/neil-modal.vue';
	import treeNode from './tree-node/tree-node.vue';
	export default {
		components:{
			treeNode,
            neilModal
		},
		props: {
			data: {
				type: Array,
				default: () => {
					return []
				}
			},
			divider: {
				type: Boolean,
				default: false
			},
			show: {
				type: Boolean,
				default: false
			},
			edit: {
				type: Boolean,
				default: false
			},
			defaultProps: {
				type: Object,
				default: () => {
					return {
						id: 'id',
						children: 'children',
						text: 'text'
					}
				}
			}
		},
		provide(){
			return {
			  defaultProps: this.defaultProps,
			  onClickItem: this.onClickItem,
			  addItem: this.addItem,
			  editItem: this.editItem,
			  deleteItem: this.deleteItem,
              fingerAction: this.fingerAction,
			  divider: this.divider,
			  show: this.show,
			  edit: this.edit,
              onlongPress: this.onlongPress
			}
		},
		data() {
			return {
                parentNodeData: {},
				addContent: '',
				addshow: false,
                inputtitle: '新增节点',
                inputshow: false,
                inputcontent: '',
			}
		},
		methods: {
            onlongPress(e) {
				this.$emit('long-press', e);
            },
			onClickItem(e) {
				// console.log(e);
				this.$emit('node-click', e);
			},
			addItem(e) {
                this.parentNodeData = e;
                this.inputcontent = '';
                this.inputtitle = '新增节点';
                this.inputshow = true;
				// this.$emit('add-item', e);
			},
			editItem(e) {
                this.inputcontent = e.text;
                this.inputtitle = '编辑节点';
                this.parentNodeData = e;
                this.inputshow = true;
				// this.$emit('add-item', e);
			},
			deleteItem(e) {
				// console.log(e.id);
				this.$emit('delete-item', e);
			},
			fingerAction(e) {
				// console.log(e.item,e.action);
                // action:1上滑, 2下滑，3左滑，4右滑
				this.$emit('finger-action', e);
			},
            inputconfirm() {
                if(this.inputtitle === '新增节点') {
                    if(this.inputcontent  && this.parentNodeData) {
                        console.log(this.inputcontent, this.parentNodeData);
                        this.$emit('add-item', {parentNodeData: this.parentNodeData, addContent: this.inputcontent});
                    }
                }
                if(this.inputtitle === '编辑节点') {
                    this.$emit('edit-item', {parentNodeData: this.parentNodeData, editContent: this.inputcontent});
                }
            },
            close() {
                this.inputshow = false;
            },
			cancel() {
                this.inputcontent = '';
                this.parentNodeData = {};
                this.inputshow = false;
			}
		}
	}
</script>
<style scoped>
	.tree-item{
		.head{
			display: flex;
			align-items: center;
			line-height: 60rpx;
		}
    }
    .head-1{
        display: flex;
        flex-basis: auto;
        margin-top: 10rpx;
        .txt{
            font-size: 30rpx;
            color: #222;
        }
    }
    .p-r-30{
        margin-right: 30rpx;
    }
    .p-t-20{
        margin-top: 20rpx;
    }
    .h-flex{
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-between;
    }
    .edit-icon{
            width: 40rpx;
            height: 40rpx;
            padding-right: 10rpx;
    }
</style>
